<!DOCTYPE html>
<html>
<head>
<script>
	function iFrameOn(){
	    rte.document.designMode = 'On';
	}
	function iBold(){
	    rte.document.execCommand('bold', false, null); 
	}
	function iUnderline(){
	    rte.document.execCommand('underline', false, null);
	}
	function iStrikeThrough(){
	    rte.document.execCommand('strikeThrough', false, null);
	}
	function iItalic(){
	    rte.document.execCommand('italic', false, null);
	}
	function iFontSize(){
	    var size = prompt('Enter a size 1 - 7', '');
	    rte.document.execCommand('fontSize', false, size);
	}
	function readFrame(){
	    alert(window.frames['rte'].document.body.innerHTML);
	}
	function iBackColor(){
		var color = prompt("Enter a Color:", '');
	    rte.document.execCommand('backColor', false, color);
	    rte.document.execCommand('hiliteColor', false, color);
	}
	function iCreateLink(){
	    var szURL = prompt("Enter a URL:", "http://");
	    rte.document.execCommand('CreateLink', false, szURL);
	}
	function iCopy(){
	    rte.document.execCommand('copy', false, null);
	}
	function iPaste(){
	    rte.document.execCommand('paste', false, null);
	}
	function iCut(){
	    rte.document.execCommand('cut', false, null);
	}
	function iDelete(){
	    rte.document.execCommand('delete', false, null);
	}
	function iFontName(){
	    rte.document.execCommand('fontName', false, "Arial");
	}
	function iFontColor(){
		var color = prompt("Enter a Color:", '');
	    rte.document.execCommand('foreColor', false, color);
	}
	function iIndent(){
	    rte.document.execCommand('indent', false, null);
	}
	function iOutdent(){
	    rte.document.execCommand('outdent', false, null);
	}
	function iHorizontalRule(){
	    rte.document.execCommand('InsertHorizontalRule', false, null);
	}
	function iImage(){
	    rte.document.execCommand('InsertImage', false, null);/////문단 번호: 모양
	}
	function iItalic(){
	    rte.document.execCommand('italic', false, null);
	}
	function iJustifyLeft(){
	    rte.document.execCommand('JustifyLeft', false, null);
	}
	function iJustifyRight(){
	    rte.document.execCommand('JustifyRight', false, null);
	}
	function iJustifyCenter(){
	    rte.document.execCommand('JustifyCenter', false, null);
	}
	function iInsertOrderedList(){
	    rte.document.execCommand('InsertOrderedList', false, null);
	}
	function iInsertUnorderedList(){
	    rte.document.execCommand('insertUnorderedList', false, null);
	}
	function iInsertParagraph(){
	    rte.document.execCommand('insertParagraph', false, null);
	}
	function iSubscript(){
	    rte.document.execCommand('subscript', false, null);
	}
	
function tableCreate() {
    //body reference 
    var irow = prompt("Enter a row:", '');
    var icolumn = prompt("Enter a column:", '');
    var rte = document.getElementById("rte");

    // create elements <table> and a <tbody>
    var tbl     = document.createElement("table");
    tbl.setAttribute("id", "myTable");
    var tblBody = document.createElement("tbody");

    // cells creation
    for (var j = 0; j <= irow; j++) {
        // table row creation
        var row = document.createElement("tr");

        for (var i = 0; i < icolumn; i++) {
            // create element <td> and text node 
            //Make text node the contents of <td> element
            // put <td> at end of the table row
         var cell = document.createElement("td");    
              var cellText = document.createTextNode("cell is row "+j+", column "+i); 

            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        //row added to end of table body
        tblBody.appendChild(row);
    }

    // append the <tbody> inside the <table>
    tbl.appendChild(tblBody);
    // put <table> in the <body>
    rte.appendChild(tbl);
    // tbl border attribute to 
    tbl.setAttribute("border", "1");
}

function setBorder() {
	var myTable = document.getElementById("myTable");
	myTable.style.border="1px solid red";
}

function setColor(table) {
	var newColor = 'red';
	if ( table.style ) {
		table.style.backgroundColor = newColor;
	}
}
</script>
</head>
<body onload="iFrameOn();">
	<input type="button" onclick="iBold()" value="B"> 
	<input type="button" onclick="iUnderline()" value="UnderLine">
	<input type="button" onclick="iStrikeThrough()" value="CenterLine">
	<input type="button" onclick="iItalic()" value="I">
	<input type="button" onClick="iFontSize()" value="Font Size">
	<input type="button" onclick="iBackColor()" value="backColor"> 
	<input type="button" onclick="iCreateLink()" value="createlink"> 
	<input type="button" onclick="iCopy()" value="Copy">
	<input type="button" onclick="iPaste()" value="Paste">  
	<input type="button" onclick="iCut()" value="Cut"> 
	<input type="button" onclick="iDelete()" value="delete"> 
	<input type="button" onclick="iFontName()" value="fontName"> 
	<input type="button" onclick="iFontColor()" value="fontColor"> 
	<input type="button" onclick="iIndent()" value="들여쓰기"> 
	<input type="button" onclick="iOutdent()" value="내어쓰기"> 
	<input type="button" onclick="iHorizontalRule()" value="수평성">  
	<input type="button" onclick="iItalic()" value="italic"> 
	<input type="button" onclick="iJustifyLeft()" value="왼쪽 정렬"> 
	<input type="button" onclick="iJustifyRight()" value="오른쪽 정렬">
	<input type="button" onclick="iJustifyCenter()" value="가운데 정렬">
	<input type="button" onclick="iInsertOrderedList()" value="문단 번호(숫자)">  
	<input type="button" onclick="iInsertUnorderedList()" value="글머리표"> 
	<input type="button" onclick="iImage()" value="그림 글머리표">
	<input type="button" onclick="iInsertParagraph()" value="뭐지??">  
	<input type="button" onclick="iSubscript()" value="아래첨자">  
	
	<input type="button" id="addRowBtn" value="+Row">
	<input type="button" id="addColBtn" value="+Col">
	<input type="button" id="border" onclick="setBorder()" value="테두리">
	<input type="button" id="color" onclick="setColor(document.getElementById('myTable'))" value="배경 색상">
	<input type="button" id="createTable" onclick="tableCreate()" value="테이블 생성">   
	<br />
	<iframe name="rte" id="rte" style="border:#000000 1px solid;"></iframe>
	<br />
	<input type="button" onclick="readFrame()" value="Show HTML Output">
</body>
</html>